Gikam.addComponent(function (props) {
    return {
        name: "LJ-chart",
        data: function () {
            return {
                markLineDom: "",   //走势图元素
                chartOption: {},   //走势图选项数据
                yAxisMax: 0   //走势图Y轴最大值
            }
        },
        methods: {
            // 格式化X轴数据
            formatXdata: function(list){
                var xdata = [];   //X轴数据
                if(list.length){
                    list[0].forEach(function(item){
                        xdata.push(item.dateTime);
                    })
                }
                return xdata;
            },
            // 判断Y轴数据最大值
            getMaxValue: function(list, key){
                key = key || "";
                var tempList = [];
                list.forEach(function(item){
                    item = item || [];
                    item.forEach(function(obj){
                        var value = +obj[key];
                        tempList.push(value)
                    })
                })
                return Math.ceil(Math.max.apply(null, tempList));
            },
            // 格式化Y轴数据及其他内容
            formatYdata: function(list){
                var ydata = [];   //Y轴数据
                if(list.length){
                    // 根据数据计算Y轴最大值
                    const maxVal = this.getMaxValue(list, "observation");
                    this.yAxisMax = (maxVal < 8) ? 8 : maxVal;
                    //格式化
                    list.forEach(function(item){
                        var tmpArr = [];
                        item.forEach(function(val){
                            var tpmObj = {};
                            val.observation = val.observation || 0;
                            tpmObj.value = val.observation;
                            tpmObj.desc = val.description;
                            tpmObj.lineName = val.name;
                            tpmObj.isNormal = val.isNormal;   //异常点
                            tmpArr.push(tpmObj);
                        })
                        ydata.push(tmpArr);
                    })
                }
                return ydata;
            },
            // 格式化标示线数据
            formatMarklineData: function(list){
                var marklineData = [];   //标示线数据
                list.map(function(item){
                    item.lineStyle.type = "dashed";   //虚线
                    item.yAxis = item.lineData;   //横标线
                    return item;
                })
                marklineData = list;
                return marklineData;
            },
            // 格式化series
            formatSeries: function(dataList){
                var seriesData = [];   //series数据
                var marklineData = this.formatMarklineData(dataList.markLineList);
                //markline渲染数据
                var marklineOption = {
                    symbol: "none",
                    emphasis: {
                        disabled: true
                    },
                    silent: true,
                    label: {
                        fontSize: 16,
                        formatter: "{b}"
                    },
                    data: marklineData
                };
                //格式化渲染选项
                if(dataList.sourceList.length){
                    var ydata = this.formatYdata(dataList.sourceList);
                    ydata.forEach(function(item){
                        var tmpObj = {
                            type: "line",
                            symbolSize: 6,
                            symbol: function(value, params){   //异常点用三角标识
                                if(params.data.isNormal){
                                    return "circle";
                                } else{
                                    return "triangle";
                                }
                            },
                            itemStyle: {
                                color: function(params){
                                    if(params.data.isNormal){   //异常点用红色标识
                                        return params.color;
                                    } else{
                                        return "red";
                                    }
                                }
                            }
                        }
                        tmpObj.data = item;
                        item.forEach(function(val){
                            tmpObj.name = val.lineName;
                        })
                        seriesData.push(tmpObj);
                    })
                    seriesData.length && (seriesData[0].markLine = marklineOption);
                } else{
                    this.yAxisMax = 8;
                    seriesData = [{
                        type: "line",
                        markLine: marklineOption
                    }]
                }
                return seriesData;
            },
            // 格式化走势图选项
            formatOption: function(dataList){
                var xdata = this.formatXdata(dataList.sourceList);
                var seriesData = this.formatSeries(dataList || []);
                var option = {
                    color: ['#5470c6', '#91cc75', '#fac858', '#925d46', '#cd5fff', '#73c0de', '#3ba272', '#d99f1d', '#fc8452', '#9a60b4'],
                    tooltip: {
                        trigger: "axis",
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: function(params){
                            var str = '';
                            if(params.length){
                                str = '<table><tr><td>' + params[0].name + '</td></tr>';
                                params.forEach(function(item){
                                    str += '<tr><td>' + item.seriesName + '：</td><td style="color:' + item.color + '">' + item.data.desc + '</td></tr>';
                                })
                                str += '</table>';
                            }
                            return str;
                        }
                    },
                    grid: {
                        left: "3%",
                        bottom: 90
                    },
                    legend: {
                        show: true
                    },
                    xAxis: [{
                        type: "category",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#ccc"
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: "#999",
                            interval: 0,
                            rotate: -60
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: xdata
                    }],
                    yAxis: [{
                        type: "value",
                        min: 0,
                        max: this.yAxisMax,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#ccc"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#ccc"
                            }
                        }
                    },
                    {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#ccc"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        inverse: true
                    }],
                    dataZoom: [
                        {
                          type: "inside",
                          start: 0,
                          end: 100
                        },
                        {
                          start: 0,
                          end: 100
                        }
                    ],
                    series: seriesData
                }
                return option;
            }
        },
        template: '<div id="charts-markline" ref="chart" class="charts-markline"></div>',
        mounted: function () {
            Gikam.create('echarts',{
                renderTo:document.getElementById('charts-markline'),
                option:this.formatOption(props.dataInfo),
                id:'echarts-main'
            })
        }
    }
})

